<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客搜索页面</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    body {
      font-family: 'Roboto', Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    header {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    nav {
      margin: 10px 0;
      display: flex;
      justify-content: center;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #f0f0f0;
    }

    .search-wrapper {
      max-width: 600px;
      margin: 50px auto;
      background-color: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
      width: 100%;
      padding: 12px 15px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      outline: none;
      font-size: 16px;
      transition: border-color 0.3s ease;
    }

    input[type="text"]:focus {
      border-color: #007BFF;
    }

    button {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    button:hover {
      background: linear-gradient(to bottom, #00b3ff, #0099ff);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    #search-results {
      margin-top: 30px;
    }

    .article-preview {
      background-color: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
      transition: box-shadow 0.3s ease;
    }

    .article-preview:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .article-preview h2 {
      margin-top: 0;
      color: #333;
      font-size: 20px;
      border-bottom: 2px solid #007BFF;
      padding-bottom: 5px;
    }

    .article-preview p {
      color: #666;
      font-size: 14px;
      margin-top: 10px;
    }

    #no-results {
      text-align: center;
      color: #666;
      display: none;
      font-size: 16px;
      margin-top: 30px;
    }
  </style>
</head>

<body>
<header>
  <nav>
    <div class="nav-links">
      <a href="/index"><i class="fas fa-home"></i> 主页</a>
      <a href="/personalhomepage">个人主页</a>
      <a href="/search.html">搜索文章</a>
    </div>
  </nav>
</header>
<button type="button" onclick="window.location.href='/index';">返回首页</button>
<div class="search-wrapper">
  <h1>博客搜索</h1>
  <input type="text" id="search-input" placeholder="请输入文章标题关键词">
  <button id="search-button">搜索</button>
  <div id="search-results"></div>
  <p id="no-results">未找到相关文章。</p>
</div>

<script>
  // 获取搜索按钮和输入框元素
  const searchButton = document.getElementById('search-button');
  const searchInput = document.getElementById('search-input');
  const searchResults = document.getElementById('search-results');
  const noResults = document.getElementById('no-results');

  // 为搜索按钮添加点击事件监听器
  searchButton.addEventListener('click', function () {
    const searchTerm = searchInput.value.trim();

    if (searchTerm === '') {
      return;
    }

    // 这里使用 fetch API 向后端发送搜索请求
    fetch(`/api/search?title=${searchTerm}`)
            .then(response => {
              if (response.status === 200) {
                return response.json();
              } else {
                throw new Error('Network response was not ok.');
              }
            })
            .then(data => {
              // 清空之前的搜索结果
              searchResults.innerHTML = '';
              noResults.style.display = 'none'; // 隐藏无结果提示

              if (data.length === 0) {
                // 如果没有搜索结果，显示提示信息
                noResults.style.display = 'block';
              } else {
                data.forEach(article => {
                  const articlePreview = document.createElement('div');
                  articlePreview.classList.add('article-preview');
                  articlePreview.innerHTML = `
              <h2>
                <a href="/article/${article.article_id}" th:text="${article.article_title}">${article.article_title}</a>
              </h2>
              <p><strong>作者:</strong> <span th:text="${article.articler}">${article.articler}</span></p>
              <p><strong>发布时间:</strong> <span th:text="${article.article_time}">${article.article_time}</span></p>
              <p th:text="${article.article_text}" th:truncate="100">${article.article_text.length > 100? article.article_text.substring(0, 100) + '...' : article.article_text}</p>
            `;
                  searchResults.appendChild(articlePreview);
                });
              }
            })
            .catch(error => {
              console.error('搜索请求出错：', error);
            });
  });
</script>
</body>

</html>
